{% extends 'base.html' %}
{% load static %}

{% block title %}
    文章详情
{% endblock %}

{% block header_css %}
    <link rel="stylesheet" href="{% static 'css/index.css' %}">
    <link rel="stylesheet" href="{% static 'css/article_detail.css' %}">
    <!-- markdown编辑器 -->
    <link rel="stylesheet" href="{% static 'js/editor-markdown/css/editormd.css' %}">

{% endblock %}

{% block header_js %}
    <script src="{% static 'js/editor-markdown/js/editormd.js' %}"></script>
{% endblock %}

{% block container %}
    <!-- 中间内容部分start -->
    <div class="container container-page" style="margin-bottom:50px;">
        <div class="view" style="background: #fff;">
            <div class="page-header">
                <dl>
                    <dt class="title">{{ article.title }}</dt>
                    <dd>
                        <span>{{ article.create_at }}</span>
                        <span>阅读数: {{ article.read_num }}</span>
                    </dd>
                </dl>
            </div>
            <div id="test-editormd">

            </div>
            <ul class="detail-ad-group">
                {% for item in detail_ad %}
                <li class="detail-list">
                    <dl>
                        <dt>
                            <a href="{{ item.ad_link }}">
                                <img src="/media/{{ item.ad_image }}" />
                            </a>
                        </dt>
                        <dd>
                            <a href="{{ item.ad_link }}">{{ item.ad_name }}</a>
                        </dd>
                    </dl>
                </li>
                {% endfor %}
            </ul>
        </div>
        <div class="sidebar" style="background: #fff;"></div>
    </div>
    <!-- 中间内容部分end -->
{% endblock %}

{% block footer %}
    <script>
        var testEditor;
        // 获取当前文章的id
        var splitUrl = document.location.pathname.split('/').filter(item=>item);
        var current_id = splitUrl[splitUrl.length - 1];
        $(function () {
            $.get('/article/article_content/' + current_id, function (md) {
                testEditor = editormd("test-editormd", {
                    width: "100%",
                    height: 740,
                    path: "{% static 'js/editor-markdown/lib/' %}",
                    markdown: md.article,
                    onload: function () {
                        this.previewing();
                        this.hideToolbar();
                        $('.editormd-preview-close-btn').hide();
                    }
                })
            })
        })
    </script>
{% endblock %}